{% extends "base.html" %}

{% block title %}Edit Exporter{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>Edit Exporter: {{ exporter.name }}</h2>
    </div>
    <div class="card-body">
        <form id="exporterForm">
            <input type="hidden" name="id" value="{{ exporter.id }}">
            
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ exporter.name }}" required>
            </div>
            
            <div class="mb-3">
                <label for="type" class="form-label">Type</label>
                <select class="form-select" id="type" name="type" required>
                    <option value="node_exporter" {% if exporter.type == 'node_exporter' %}selected{% endif %}>Node Exporter</option>
                    <option value="cadvisor" {% if exporter.type == 'cadvisor' %}selected{% endif %}>cAdvisor</option>
                    <option value="redis_exporter" {% if exporter.type == 'redis_exporter' %}selected{% endif %}>Redis Exporter</option>
                    <option value="mysql_exporter" {% if exporter.type == 'mysql_exporter' %}selected{% endif %}>MySQL Exporter</option>
                    <option value="custom" {% if exporter.type == 'custom' %}selected{% endif %}>Custom</option>
                </select>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="host" class="form-label">Host</label>
                    <input type="text" class="form-control" id="host" name="host" value="{{ exporter.host }}" required>
                </div>
                <div class="col-md-6">
                    <label for="port" class="form-label">Port</label>
                    <input type="number" class="form-control" id="port" name="port" value="{{ exporter.port }}" required>
                </div>
            </div>
            
            <div class="mb-3">
                <label for="path" class="form-label">Metrics Path</label>
                <input type="text" class="form-control" id="path" name="path" value="{{ exporter.path }}">
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="enabled" name="enabled" {% if exporter.enabled %}checked{% endif %}>
                        <label class="form-check-label" for="enabled">Enabled</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="scrape_interval" class="form-label">Scrape Interval (seconds)</label>
                    <input type="number" class="form-control" id="scrape_interval" name="scrape_interval" value="{{ exporter.scrape_interval }}">
                </div>
            </div>
            
            <div class="mb-3">
                <label for="labels" class="form-label">Labels (JSON format)</label>
                <textarea class="form-control" id="labels" name="labels" rows="3">{{ exporter.labels | tojson }}</textarea>
            </div>
            
            <button type="submit" class="btn btn-primary">Update</button>
            <a href="/" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>

<script>
document.getElementById('exporterForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const exporterId = formData.get('id');
    const data = {
        name: formData.get('name'),
        type: formData.get('type'),
        host: formData.get('host'),
        port: parseInt(formData.get('port')),
        path: formData.get('path'),
        enabled: formData.get('enabled') === 'on',
        scrape_interval: parseInt(formData.get('scrape_interval')),
        labels: formData.get('labels') ? JSON.parse(formData.get('labels')) : {}
    };
    
    try {
        const response = await fetch(`/api/exporters/${exporterId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            window.location.href = '/';
        } else {
            const error = await response.json();
            alert(`Error: ${error.detail || 'Failed to update exporter'}`);
        }
    } catch (err) {
        alert('Error submitting form: ' + err.message);
    }
});
</script>
{% endblock %}